<!--
 * @Author: xiaopang
 * @Date: 2025-10-16 11:27:23
 * @LastEditTime: 2025-10-17 16:07:43
 * @LastEditors: xiaopang
-->
<template>
  <div class="h-screen pt-188px" style="background: url('/src/assets/login-bg.png') no-repeat 0 0; background-size: contain">
    <div class="h-full py-98px px-25px rounded-t-20px bg-white">
      <div class="h-50px mb-20px flex items-center px-18px bg-#F1F4F9 rounded-10px">
        <img class="w-12px h-16px" src="@/assets/phone-icon.png" alt="" />
        <van-field v-model="phone" placeholder="请输入手机号码" />
      </div>
      <div class="h-50px mb-60px flex items-center px-18px bg-#F1F4F9 rounded-10px">
        <img class="w-12px h-16px" src="@/assets/password-icon.png" alt="" />
        <van-field v-model="password" placeholder="请输入密码" :type="isPasswordVisible ? 'text' : 'password'" />
        <div class="eye-icon" @click="isPasswordVisible = !isPasswordVisible">
          <van-icon :name="isPasswordVisible ? 'eye-o' : 'closed-eye'" />
        </div>
      </div>
      <div class="login-btn" @click="handleLogin">登录</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';

const isPasswordVisible = ref(false);
const password = ref('');
const phone = ref('');

const handleLogin = () => {
  if (!phone.value || !password.value) {
    console.log(phone.value, password.value, showToast);
    showToast('请输入手机号码和密码');
    return;
  }
};
</script>

<style scoped>
.login-btn {
  width: 325px;
  height: 50px;
  line-height: 50px;
  background: linear-gradient(90deg, #fa7162 0%, #fc6b51 100%);
  border-radius: 10px;
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
}
</style>
